import React from 'react';
import { Form } from 'antd';
import { Collapse } from '@/molecules';
import { useCollapse } from '@/hooks';
import { DetailDiscussArrange, AssessResultDynamic, AssessLeaderDetail } from '../containers';

import { useAssessSetting } from '../hooks';
import { TRIAL_ACTION } from '../constants';

const { Panel } = Collapse;

function AssessLeaderM({ data = {} }) {
    const { assessMonthly = [] } = data;

    const { activeKey, onChange } = useCollapse(['1', '2', '3'], []);
    const { m } = useAssessSetting(data);

    const detail = React.useMemo(() => {
        const teacher = assessMonthly.find(item => item.status === TRIAL_ACTION.ASSESS_TEACHER_MONTH) || {};
        const leader = assessMonthly.find(item => item.status === TRIAL_ACTION.ASSESS_LEADER_MONTH) || {};

        // 能力综合评分取主管的值
        const total = { level: leader.level, score: leader.score };
        return { teacher, leader, total };
    }, [assessMonthly]);

    const showDiscuss = React.useMemo(() => Boolean(detail?.leader?.interviewArrange?.id));

    return (
        <div>
            <Collapse bordered={false} activeKey={activeKey} onChange={onChange}>
                <AssessResultDynamic data={data} />
                {m.showAssess && (
                    <Panel header="能力评估" key="2">
                        <AssessLeaderDetail data={data} detail={detail} />
                    </Panel>
                )}
                {showDiscuss && (
                    <Panel header="新员工面谈安排" key="3">
                        <DetailDiscussArrange data={detail?.leader?.interviewArrange} />
                    </Panel>
                )}
            </Collapse>
        </div>
    );
}

export default Form.create({})(AssessLeaderM);
